<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="huawei.css">
    <script src="huawei.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2047461_q5zv7xus56i.css">
</head>

<body>
    <div id="container">
        <div id="top">
            <div id="center">
                <p>消费者业务网站</p>
            </div>
        </div>
        <div id="logo">
            <div id="center">
                <a href="">
                    <img src="./imgs/17.png" alt="">
                </a>
                <div id="nav">
                    <ul>
                        <li><a href="" class="a">手机</a></li>
                        <li><a href="" class="b">笔记本</a></li>
                        <li><a href="">平板</a></li>
                        <li><a href="">智慧屏</a></li>
                        <li><a href="">穿戴</a></li>

                        <li><a href="">更多产品</a></li>
                        <li><a href="">EMUI11</a></li>
                        <li><a href="">服务支持</a></li>
                        <li><a href="">零售店</a></li>
                        <li><a href="">商用</a></li>
                    </ul>
                </div>
                <div id="peo">
                    <a href=""> <i class="iconfont icon-sousuo"></i></a>
                    <a href=""> <i class="iconfont icon-icon"></i></a>
                    <a href=""> <span>华为商城</span></a>

                </div>
            </div>
        </div>
        <div id="show">
            <div id="center">
                <div id="left">
                    <div id="phone">
                        <p>HUAWEIMate 40 Pro</p>
                        <p>跃见非凡</p>
                        <p>HUAWEI Mate 40 Pro，麒麟 9000 5G 芯片，性能体验震撼超前。超感知徕卡电影影像，支持全时段高清摄影、硬件实时视频 HDR、运动防抖等拍摄功能。更有 66 W
                            超级快充及 50 W 无线超级快充。
                        </p>
                        <div id="know">
                            <a href="">了解更多</a>
                            <a href=""> 预定</a>
                        </div>
                        <div class="color">
                            <div class="hang">
                                <div class="black h1">
                                    <span style="background-color: skyblue;"></span>
                                </div>
                                <div class="black h2">
                                    <span style="background-color: white;"></span>
                                </div>
                                <div class="black h3">
                                    <span style="background-color: #000;"></span>
                                </div>
                                <div class="black h4">
                                    <span style="background-color: rgb(88, 86, 86);"></span>
                                </div>
                                <div class="black h5">
                                    <span style="background-color: rgb(238, 171, 45);"></span>
                                </div>
                            </div>

                            <div id="fenlei">
                                <p id="colors"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="right">
                    <img src="./img/bj.jpg" alt="">
                </div>

            </div>
            <div id="phones">
                <div class="img1">
                    <img src="./img/深海蓝1.png" alt="" class="change1">
                </div>
                <div class="img2">
                    <img src="./img/深海蓝2.png" alt="" class="change2">
                </div>
            </div>
        </div>
        <div id="capacity">
            <div id="center">
               <h2>智能手机(42)</h2>
            </div>
        </div>
        <div id="shaixuan">
            <div id="center">
                <h4 class="a1">筛选 <i class="iconfont icon-xiangxiajiantou i1"></i> </h4>
            </div>
        </div>
        <div id="chongzhi">
            <div id="hello">
                <h4>筛选<i class="iconfont icon-shangjiantou i2"></i></h4>
                <h4>重置</h4>
            </div>
            <ul style="margin-left: -150px;">
                <li> <a href="">系列</a> </li>
                <li><a href=""> HUAWEIMate 系统</a></li>
                <li><a href=""> HUAWEIIP系列</a></li>
                <li><a href="">HUAWEInova系列</a></li>
                <li><a href=""> 华为畅享系列</a></li>
                <li><a href=""> 华为麦芒系列</a></li>
            </ul>
            <ul style="margin-left: -700px;">
                <li><a href="">价格</a>  </li>
                <li><a href="">  0-999</a></li>
                <li><a href="">  1000-1999</a></li>
                <li><a href="">  2000-3999</a></li>
                <li><a href="">  4000-59999</a></li>
                <li><a href="">  6000及以上</a></li>
            </ul>
            <ul style="margin-left: -700px;">
                <li style="top: -100px;"><a href="">存储容量</a></li>
                <li style="margin-top: -60px;"><a href="">64G</a></li>
                <li><a href="">128G</a></li>
                <li><a href="">256GB级以上</a></li>
             </ul>
             <ul style="margin-left: -700px;">
                <li style="top: -125px;"><a href="">是否支持5G</a></li>
                <li style="margin-top: -80px;"><a href="">不支持</a></li>
                <li><a href="">支持</a></li>
             </ul>
             <ul style="margin-left: -700px;">
                <li style="top: -55px;"><a href="">其他功能</a></li>
                <li><a href="">NFC</a></li>
                <li><a href="">40W及以上超级快充</a></li>
                <li><a href="">徕卡摄像头</a></li>
                <li><a href="">防水</a></li>
             </ul>
        </div>
        <div id="content" style="margin-top: -460px;">
           <div id="center">
               <div id="new">
                   <div id="changeColor">
                         <a href="" class="HUAWEI">
                             <img src="./img/GodC2.png" alt="" class="a2">
                             <img src="./img/1.png" alt="" class="a3">
                         </a>
                   </div>
                   <div class="color" style="margin-top: 80px;margin-left: 320px;">
                    <div class="hang">
                        <div class="black1 h1">
                            <span style="background-color:rgb(241, 246, 254);"></span>
                        </div>
                        <div class="black1 h2">
                            <span style="background-color: rgb(255, 255, 255);"></span>
                        </div>
                        <div class="black1 h3">
                            <span style="background-color:rgb(0, 0, 0);"></span>
                        </div>
                        <div class="black1 h4">
                            <span style="background-color: rgb(121, 127, 113);"></span>
                        </div>
                        <div class="black1 h5">
                            <span style="background-color:rgb(253, 188, 95)"></span>
                        </div>
                    </div>
               </div>
           </div>
        </div>
    </div>
    <script src="./jquery/jquery-3.5.1.js"></script>
    <script>
         var news=document.getElementById("new")
       var pic=document.getElementsByClassName("HUAWEI")[0]
       var a2=document.getElementsByClassName("a2")[0]
       var a3=document.getElementsByClassName("a3")[0]
       arrImg=['./img/1.png','./img/white.png','./img/black.png','./img/green.png','./img/yellow.png']
       arrColor=['rgb(241, 246, 254)','rgb(255, 255, 255)','rgb(0, 0, 0)','rgb(121, 127, 113)','rgb(253, 188, 95)']
       var black1=document.getElementsByClassName("black1")
       console.log(black1);
       for(let k=0;k<black1.length;k++){
           const b=black1[k]
           b.onclick=function(){
               a3.src=`${arrImg[k]}`
            this.style = ' border: 2px solid grey;transition:all 0.5s linear;'
            news.style.backgroundColor=`${arrColor[k]}`
           }
       }
         pic.onmouseenter=function(){
             a2.style.transform=" translate(-10px,0)"
             a3.style.transform=" translate(10px,0px)"
         }
         pic.onmouseleave=function(){
             a2.style.transform=" translate(10px,0)"
             a3.style.transform=" translate(-10px,0px)"
         }
 
















        var a1=document.getElementsByClassName("a1")[0]
        var shaixuan=document.getElementById("shaixuan")
        var i1=document.getElementsByClassName("i1")[0]
        var chongzhi=document.getElementById("chongzhi")
        var hello=document.getElementById("hello")
        console.log(shaixuan)
        shaixuan.onclick=function(){
            console.log("22222222");
            i1.style=`transform:rotate(-90deg)`
            // $("#chongzhi").fadeIn()
            // $("#shaixuan").fadeOut()
            shaixuan.style.display="none"
            chongzhi.style.display="flex"
            chongzhi.style. opacity='1'

        }
        hello.onclick=function(){
            chongzhi.style.display="none"
            shaixuan.style.display="block"
            // $("#chongzhi").fadeOut()
            // $("#shaixuan").fadeIn()
        }



















        var a = document.querySelectorAll("#nav ul li a")
        console.log(a)
        for (let i = 0; i < a.length; i++) {
            const nav = a[i]
            nav.onmouseenter = function () {
                aa()
                nav.style.color = '#000'

            }
            nav.onmouseleave = function () {
                aaa()
            }
        }
        function aa() {
            for (let i = 0; i < a.length; i++) {
                const nav = a[i]
                nav.style = `color:grey;transition:all 0.5s `
            }
        }
        function aaa() {
            for (let i = 0; i < a.length; i++) {
                const nav = a[i]
                nav.style = `color:#000;transition:all 0.5s `
            }
        }
        var block = document.getElementsByClassName("black")
        var fenlei = document.getElementById("colors")
        var arr = ["秘银色", "柚白色", "亮黑色", "绿色", "黄色"]
        for (let i = 0; i < block.length; i++) {
            const colo = block[i]
            colo.onmouseenter = function () {
                remove()
                this.style = ' border: 2px solid grey;transition:all 0.5s linear;'
                var test = arr[i]
                fenlei.innerHTML = test
            }
            colo.onmouseleave = function () {
                remove()
                this.style = ' border: 2px solid transparent'
            }
        }
        function remove() {
            block.style = "border: 2px solid transparent"
        }
        var h1 = document.getElementsByClassName("h1")[0]
        var h2 = document.getElementsByClassName("h2")[0]
        var h3 = document.getElementsByClassName("h3")[0]
        var h4 = document.getElementsByClassName("h4")[0]
        var h5 = document.getElementsByClassName("h5")[0]
        var change1 = document.getElementsByClassName("change1")[0]
        var change2 = document.getElementsByClassName("change2")[0]
        var img1 = document.getElementsByClassName("img1")[0]
        var img2 = document.getElementsByClassName("img2")[0]
        h1.onclick = function () {
            restore()

            mm("./img/深海蓝1.png", "./img/深海蓝2.png")
        }
        h2.onclick = function () {
            restore()

            mm("./img/零度白1.png", "./img/零度白2.png")
        }
        h3.onclick = function () {
            restore()

            mm("./img/亮黑色1.png", "./img/亮黑色2.png")
        }
        h4.onclick = function () {
            restore()
            mm("./img/冰霜银1.png", "./img/冰霜银2.png")
        }
        h5.onclick = function () {
            restore()
            mm("./img/晨曦金1.png", "./img/晨曦金2.png")

        }

        function mm(src1, src2) {
            setTimeout(function () {
                change1.src = src1
                change2.src = src2
                img1.style.top = 40 + "px"
                img2.style.top = 80 + "px"
                setTimeout(function () {
                    img1.style.animationName = 'none'
                    img2.style.animationName = 'none'
                }, 500)
            }, 500)
        }

        function restore() {
            img1.style.animationName = 'an'
            img2.style.animationName = 'an'
            img1.style.top = 140 + "px"
            img2.style.top = 260 + "px"
        }
    </script>
</body>

</html>